import React from 'react';
import {Layout,Input,DatePicker, Radio,Upload, message, Button} from 'antd'
import { UploadOutlined } from '@ant-design/icons';
import {NavLink} from 'react-router-dom'
import {getSessionStoreage} from '../../../util/storeage'
import './AddYeMian.css'
const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
        authorization: 'authorization-text',
    },
    onChange(info) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    },
};
// const { RangePicker } = DatePicker;
const { TextArea } = Input;

//新增付款单
class AddPaymentOrder extends React.Component {
    constructor(props){
        super(props)
        this.state={
            payStatusId: '',//付款方式
            stypeInput:{visibility:'hidden'},
            notes: '',//备注
            timeData:new Date(),
            payPerson:'',
            isShow :{visibility:'hidden'},
            payMoney:'',
            ShowMoney:{visibility:'hidden'},
            confirmTime:'',
            paymentOperator:'',
            paymentRecordsId:'SK-20200501-164804',//单号


        }
    }
    onChangeTextArea = ({ target: { notes } }) => {
        this.setState({ notes });
    };
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });

    };
    onChangeDealers=(title,content,e)=>{
        console.log(title)
        this.setState({
            [title]:e.target.value
        })
        if (e.target.value==='') {
            this.setState({
                [content] :{
                    visibility:'visible'
                }
            })
        }  else{
            this.setState({
                [content] :{
                    visibility:'hidden'
                }
            })
        }
    }
    saveData=()=>{
        console.log(123)
        if (this.state.dealersInput==='') {
            this.setState({
                isShow :{
                    visibility:'visible'
                }
            })
        }
        if (this.state.moneyInput===''){
            this.setState({
                ShowMoney :{
                    visibility:'visible'
                }
            })
        }
        if (this.state.value===''){
            this.setState({
                stypeInput :{
                    visibility:'visible'
                }
            })
        }
        if (this.state.value!=='' && this.state.moneyInput!==''&&this.state.dealersInput!==''){
            let {payPerson,paymentOperator,payMoney,confirmTime,payStatusId,notes,paymentRecordsId}=this.state

        }

    }
    onChangeA=(value, dateString) =>{
        this.setState({
            confirmTime:dateString
        })
    }
     onOk=(value)=> {
        console.log('onOk: ', value);
    }
    onChangeB=(title,e)=>{
        this.setState({
            [title]:e.target.value
        })
    }
    render() {
        const { notes } = this.state.notes;
        console.log(this.state.timeData.toLocaleDateString())
        return (
            <div style={{backgroundColor:"white"}}>
                <Layout className='Bg'>
                    <div className='BoxTou'>
                        <div className='BoxConnect'>
                            <div className='BoxTitle'><span className='redStyle'>*</span>收款方</div>
                            <Input style={{width:100,height:'30px'}} disabled placeholder="经销商" />
                            <div>
                                <Input value={this.state.payPerson} onChange={this.onChangeDealers.bind(this,'payPerson','isShow')} style={{width:600,height:'30px'}} placeholder="请输入名称/编码/联系人/手机"  />
                                <div className='redTiShi' style={this.state.isShow}>收款方不能为空</div>
                            </div>
                        </div>
                        <div className='BoxConnect'>
                            <div className='BoxTitle'>经办人</div>
                            <Input  style={{width:700,height:'30px'}} value={this.state.paymentOperator} onChange={this.onChangeB.bind(this,'paymentOperator')} placeholder="请输入经办人" />
                        </div>
                    </div>

                    <div className='BoxTou'>
                        <div className='BoxConnect'>
                            <div className='BoxTitle'><span className='redStyle'>*</span>付款金额</div>
                            <div>
                                <Input style={{width:700,height:'30px'}}  onChange={this.onChangeDealers.bind(this,'payMoney','ShowMoney')} placeholder="请输入收款金额" />
                                <div className='redTiShi' style={this.state.ShowMoney}>付款金额不能为空</div>
                            </div>

                        </div>
                        <div className='BoxConnect'>
                            <div className='BoxTitle'>制单人</div>
                            <Input style={{width:700,height:'30px'}} disabled placeholder={getSessionStoreage('username')} />
                        </div>
                    </div>

                    <div className='BoxTou'>
                        <div className='BoxY'>
                            <div className='BoxX'>
                                <div className='BoxTitle'><span className='redStyle'>*</span>付款日期</div>
                                <DatePicker   style={{width:700,height:'30px'}} showTime onChange={this.onChangeA} onOk={this.onOk} />
                            </div>
                            <div className='BoxX' style={{marginTop:'20px'}}>
                                <div className='BoxTitle'><span className='redStyle'>*</span>付款方式</div>
                                <div style={{width:700}}>
                                    <Radio.Group onChange={this.onChangeDealers.bind(this,'payStatusId','stypeInput')} value={this.state.value}>
                                        <Radio value='现金'>现金</Radio>
                                        <Radio value='银行转账'>银行转账</Radio>
                                    </Radio.Group>
                                    <div className='redTiShi' style={this.state.stypeInput}>付款方式不能为空</div>
                                </div>

                            </div>
                        </div>
                        <div className='BoxConnect'>
                            <div className='BoxTitle'>备注</div>
                            <TextArea
                            value={notes}
                            style={{width:700}}
                            onChange={this.onChangeTextArea}
                            placeholder="Controlled autosize"
                            autoSize={{ minRows: 3, maxRows: 5 }}
                        />
                        </div>
                    </div>

                    <div className='BoxTou'>
                        <div className='BoxConnect'>
                            <div className='BoxTitle'><span className='redStyle'>*</span>单号</div>
                            <Input style={{width:800,height:'30px'}} onChange={this.onChangeB.bind(this,'paymentRecordsId')} value={this.state.paymentRecordsId} placeholder="请输入单号" />
                        </div>
                        <div className='BoxConnect'>
                            <div className='BoxTitle'>附件</div>
                            <Upload {...props}>
                                <Button>
                                    <UploadOutlined /> 上传附件
                                </Button>
                            </Upload>
                            <div>建议上传单付款凭证，如汇款单等；附件支持JPG\PNG\Excel\TxT格式，大小不超过4M</div>
                        </div>
                    </div>

                </Layout>
                <div className='footerBtn'>
                    <NavLink to='/homepage/paymentorder'>
                        <Button style={{marginRight:'20px'}}>取消</Button>
                    </NavLink>
                    <Button style={{marginLeft:'20px'}} type="primary" onClick={this.saveData}>保存</Button>
                </div>
            </div>
        );
    }
}


export default AddPaymentOrder;